<template>
    <van-nav-bar title="VueShop" />

    <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in HotProductData" :key="index" @click="ToProductInfo(item.id)">
            <van-image width="100%" height="240" fit="cover" :src="item.thumb_text" />
        </van-swipe-item>
    </van-swipe>

    <van-grid :border="false" :column-num="4">
        <van-grid-item to="/product" text="全部商品">
            <template #icon>
                <van-image width="50" height="50" src="/assets/images/quanbu.png" />
            </template>
        </van-grid-item>
        <van-grid-item text="商品直播">
            <template #icon>
                <van-image width="50" height="50" src="/assets/images/zhibo.png" />
            </template>
        </van-grid-item>
        <van-grid-item to="/coupon" text="优惠活动">
            <template #icon>
                <van-image width="50" height="50" src="/assets/images/youhui.png" />
            </template>
        </van-grid-item>
        <van-grid-item to="/product/rank" text="榜单排行">
            <template #icon>
                <van-image width="50" height="50" src="/assets/images/bangdan.png" />
            </template>
        </van-grid-item>
    </van-grid>

    <div class="type">新品</div>

    <div class="list">
        <div class="item" v-for="item in NewProductData" :key="item.id">
            <router-link :to="{path:'/product/info',query:{proid:item.id,name:'demo'}}">
                <div class="thumb">
                    <van-image
                        width="100%"
                        height="150px"
                        fit="cover"
                        :src="item.thumb_text"
                    />
                </div>
                <div class="name">{{ item.name }}</div>
                <div class="box">
                    <div class="price">
                        <span v-if="item.live_price > 0">￥{{ item.live_price }}</span>
                        <span :class="item.live_price ? 'product_price' : ''">￥{{ item.price }}</span>
                    </div>
                    <div class="buy-count">{{ item.buy_count }}人付款</div>
                </div>
                <div class="box">
                    <div class="region">{{ item.region_text }}</div>
                    <div class="chat"><van-icon name="chat-o" color="#ff5000" size="16" /></div>
                </div>

            </router-link>
       </div>
    </div>

    <Tabbar />
</template>

<script setup>
const { proxy } = getCurrentInstance();

const NewProductData = ref([]);
const HotProductData = ref([]);

onBeforeMount(() => GetProductData());

const GetProductData = async () =>
{
    const result = await proxy.$http.post({
        url:'/index/index'
    });

    if(result.code === 1)
    {
        NewProductData.value = result.data.NewProductData;
        HotProductData.value = result.data.HotProductData;
    }
}

const ToProductInfo = (proid) =>
{
    console.log(proid);  
}
</script>

<style scoped>
@import url('/assets/css/home.css');
</style>